<template>
  <div class="staff-container relative w-full min-h-[600px] bg-white p-6 rounded-lg shadow-md overflow-auto">
    <!-- 五线谱背景 -->
    <div class="staff-lines absolute inset-0 pointer-events-none">
      <div v-for="(line, index) in 5" :key="index" 
           class="absolute w-full h-[1px] bg-gray-200" 
           :style="{ top: `${line * 10}px` }"></div>
    </div>
    
    <!-- 乐谱内容 -->
    <div class="score-content relative">
      <!-- 标题和基本信息 -->
      <div class="text-center mb-8">
        <h1 class="text-2xl font-bold mb-2">{{ title }}</h1>
        <div class="flex justify-center space-x-6 text-sm text-gray-600">
          <span>作曲：{{ composer }}</span>
          <span>作词：{{ lyricist }}</span>
        </div>
        <div class="flex justify-center space-x-4 text-sm text-gray-600 mt-1">
          <span>{{ keySignature }}</span>
          <span>{{ timeSignature }}</span>
          <span>♩={{ tempo }}</span>
        </div>
      </div>
      
      <!-- 小节区域 -->
      <div class="bars-container mt-8 space-y-12">
        <!-- 每5小节换行 -->
        <div v-for="(group, groupIndex) in barGroups" :key="groupIndex" class="space-x-2">
          <div v-for="(bar, barIndex) in group" :key="barIndex" 
               class="bar inline-block relative" 
               :style="{ width: `${barWidth}px` }">
            <!-- 小节线 -->
            <div class="absolute left-0 top-0 bottom-0 w-[1px] bg-gray-400"></div>
            <div class="absolute right-0 top-0 bottom-0 w-[1px] bg-gray-400"></div>
            
            <!-- 音符 -->
            <div v-for="(note, noteIndex) in bar.notes" :key="noteIndex"
                 class="note absolute"
                 :style="{ 
                    left: `${noteIndex * noteSpacing}px`,
                    top: `${getNotePosition(note)}px`,
                    fontSize: `${getNoteSize(note)}px`
                  }">
              {{ formatNote(note) }}
            </div>
            
            <!-- 歌词 -->
            <div v-if="lyrics[barIndex + groupIndex * 5]" 
                 class="lyric absolute bottom-[-20px] left-0 right-0 text-center text-sm">
              {{ lyrics[barIndex + groupIndex * 5] }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useScoreStore } from '../stores/scoreStore';
import { formatNote } from '../utils/noteFormatter';

const props = defineProps({
  bars: {
    type: Array,
    default: () => []
  },
  lyrics: {
    type: Array,
    default: () => []
  }
});

const scoreStore = useScoreStore();

const title = computed(() => scoreStore.title);
const composer = computed(() => scoreStore.composer);
const lyricist = computed(() => scoreStore.lyricist);
const keySignature = computed(() => `1=${scoreStore.keySignature}`);
const timeSignature = computed(() => scoreStore.timeSignature);
const tempo = computed(() => scoreStore.tempo);

// 布局参数
const barWidth = ref(100);
const noteSpacing = ref(18);

// 分组显示小节 (每5个一组)
const barGroups = computed(() => {
  const groups = [];
  for (let i = 0; i < props.bars.length; i += 5) {
    groups.push(props.bars.slice(i, i + 5));
  }
  return groups;
});

// 计算音符在五线谱上的位置
const getNotePosition = (note) => {
  // 基本音符位置映射
  const notePositions = {
    '1': 40, '2': 30, '3': 20, '4': 15, '5': 5, '6': -5, '7': -15,
    '·1': 10, '·2': 0, '·3': -10, '·4': -15, '·5': -25, '·6': -35, '·7': -45,
    '1·': 70, '2·': 60, '3·': 50, '4·': 45, '5·': 35, '6·': 25, '7·': 15
  };
  
  return notePositions[note] || 40;
};

// 获取音符大小
const getNoteSize = (note) => {
  return note.includes('·') ? 16 : 18;
};
</script>

<style scoped>
.staff-container {
  position: relative;
  overflow: auto;
}

.note {
  display: inline-block;
  text-align: center;
  z-index: 10;
  font-family: 'Arial Unicode MS', sans-serif;
}

.bar {
  display: inline-block;
  height: 60px;
  margin-right: 5px;
  position: relative;
}
</style>